<template>
	<view class="orderDatail">
		<navbar :showBack="true" backgroundColor="#e93323" color="#ffffff">订单详情</navbar>
		<view class="header bg-color acea-row row-middle">
			<view class="data">
				<view class="state">{{list._status._msg}}</view>
				<view>{{list.add_time_y}}<text class="time"> {{list.add_time_h}}</text></view>
			</view>
		</view>
		<view>
			<view class="nav">
				<view class="navCon acea-row row-between-wrapper">
					<view :class="list.paid==0?'on':''">待付款</view>
					<view :class="list.paid==1&&list.status==0?'on':''">待发货</view>
					<view :class="list.paid==1&&list.status==1?'on':''">待收货</view>
					<view :class="list.paid==1&&list.status==2?'on':''">待评价</view>
					<view :class="list.paid==1&&list.status==3?'on':''">已完成</view>
				</view>
				<view class="progress acea-row row-between-wrapper">
					<view class="iconfont" :class="list.paid==0?'icon-webicon318 font-color':'icon-yuandianxiao'"></view>
					<view class="line"></view>
					<view class="iconfont" :class="list.paid==1&&list.status==0?'icon-webicon318 font-color':'icon-yuandianxiao'"></view>
					<view class="line"></view>
					<view class="iconfont" :class="list.paid==1&&list.status==1?'icon-webicon318 font-color':'icon-yuandianxiao'"></view>
					<view class="line"></view>
					<view class="iconfont" :class="list.paid==1&&list.status==2?'icon-webicon318 font-color':'icon-yuandianxiao'"></view>
					<view class="line"></view>
					<view class="iconfont" :class="list.paid==1&&list.status==3?'icon-webicon318 font-color':'icon-yuandianxiao'"></view>
				</view>
			</view>
			<view class="address">
				<view class="name">
					{{list.real_name}}<text class="phone">{{list.user_phone}}</text>
				</view>
				<view>{{list.user_address}}</view>
			</view>
			<view class="line"><image src="../../../static/images/line.jpg" mode=""></image></view>
		</view>
		<view class="orderGoods">
			<view class="total">共{{list.total_num}}件商品</view>
			<view class="goodWrapper">
				<navigator url="" class="item acea-row row-between-wrapper" v-for="(item,index) in list.cartInfo" :key="index">
					<view class="pic"><image :src="item.productInfo.image" mode=""></image></view>
					<view class="text">
						<view class="acea-row row-between-wrapper">
							<view class="name line1">{{item.productInfo.store_name}}</view>
							<view class="num">x {{item.cart_num}}</view>
						</view>
						<view class="attr line1">{{item.productInfo.attrInfo.suk}}</view>
						<view class="money font-color">￥{{item.truePrice}}</view>
						<navigator :url="item.is_reply==1?'':('/pages/pack/order_rate/order_rate?unique='+item.unique)" v-if="list.paid==1&&list.status==2" class="evaluate">{{item.is_reply==1?'已评价':'评价'}}</navigator>
					</view>
				</navigator>
			</view>
		</view>
		<view class="wrapper">
			<view class="item acea-row row-between">
				<view>订单编号：</view>
				<view class="conter acea-row row-middle row-right">
					{{order_id}}
					<text class="copy" @click="copy(order_id)">复制</text>
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>下单时间：</view>
				<view class="conter acea-row row-middle row-right">
					{{list.add_time_y}} {{list.add_time_h}}
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>支付状态：</view>
				<view class="conter acea-row row-middle row-right">
					{{list._status._title}}
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>支付方式：</view>
				<view class="conter acea-row row-middle row-right">
					{{list.pay_type | getType}}
				</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="item acea-row row-between">
				<view>支付金额：</view>
				<view class="conter acea-row row-middle row-right">
					￥{{list.total_price}}
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>优惠券抵扣：</view>
				<view class="conter acea-row row-middle row-right">
					-￥{{list.coupon_price}}
				</view>
			</view>
			<view class="item acea-row row-between" v-show="list.deduction_price != 0">
				<view>积分抵扣：</view>
				<view class="conter acea-row row-middle row-right">
					-￥{{list.deduction_price}}
				</view>
			</view>
			<view class="item acea-row row-between">
				<view>运费：</view>
				<view class="conter acea-row row-middle row-right">
					￥{{list.pay_postage}}
				</view>
			</view>
			<view class="actualPay acea-row row-right">
				实付款：
				<text class="money font-color">￥{{list.pay_price}}</text>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="footer acea-row row-right row-middle" v-if="list.paid==0">
			<view class="qs-btn" @click.stop="orderCancel(list.order_id)">取消订单</view>
			<view class="bnt bg-color" @click.stop="openPay(list.order_id)">立即付款</view>
		</view>
		<view class="footer acea-row row-right row-middle" v-if="list.paid==1&&(list.status==2||list.status==3)">
			<navigator :url="'/pages/pack/order_refund/order_refund?uni='+order_id" class="qs-btn" >申请退款</navigator>
			<view class="bnt bg-color" @click.stop="buyAgain">再次购买</view>
		</view>
		<payType-window :show="showPay" :showIcon="false" :payType="payType" @close="closePay" @changeType="changeType"></payType-window>
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				list:{},
				showPay:false,
				order_id:'',
				startOnShow:false
			}
		},
		onLoad(e) {
			let order_id = e.order_id;
			this.order_id = e.order_id;
			this.getDetail(order_id);
		},
		onShow() {
			console.log()
			if(this.startOnShow){
				let order_id = this.order_id;
				this.getDetail(order_id)
			}
		},
		filters:{
			getType:function(e){
				switch(e){
					case "weixin":
						return "微信支付"
					break;
					case "yue":
						return "余额支付"
					break;
					case "offline":
						return "线下支付"
					break;
				}
			}
		},
		methods:{
			getDetail:function(order_id){
				const that = this;
				api.order.orderDetail(order_id).then(e=>{
					console.log(e)
					if(e.status == 200){
						that.list = e.data
						that.startOnShow = true;
					}
				})
			},
			copy:function(w){
				uni.setClipboardData({
					data:w,
					success() {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					}
				})
			},
			orderCancel:function(id){ // 取消订单
				const that = this;
				uni.showModal({
					title:"是否删除？",
					success(e) {
						if(e.confirm){
							api.order.orderCancel(id).then(e=>{
								uni.showToast({
									title:e.msg,
									icon:"none"
								})
								if(e.status == 200){
									uni.navigateBack({})
								}
							})
						}
					}
				})
			},
			changeType:function(paytype){ // 跟换支付方式
				let order_id = this.order_id;
				let from = "weixin";
				const that = this;
				api.order.orderPay(order_id,paytype,from).then(e=>{
					uni.showToast({
						title:e.msg,
						icon:"none"
					})
					if(e.status == 200){
						that.getDetail(order_id)
					}
				})
			}, 
			buyAgain:function(){ //再次下单
				let order_id = this.order_id;
				api.order.orderAgain(order_id).then(e=>{
					console.log(e.status)
					if(e.status == 200){
						uni.navigateTo({
							url:"/pages/pack/order_confirm/order_confirm?id="+e.data.cateId
						})
					}
				})
			},
			openPay:function(id){
				this.order_id = id;
				this.showPay = true
			},
			closePay:function(){
				this.showPay = false
			}
		}
	}
</script>

<style>
	.orderDatail .header{
		padding: 0 30rpx;
		height: 150rpx;
	}
	.orderDatail .header .data{
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
	}
	.orderDatail .header .data .state{
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}
	.orderDatail .header .data .time{
		margin-left: 20rpx
	}
	.orderDatail .nav{
		background-color: #fff;
		font-size: 26rpx;
		color: #282828;
		padding: 25rpx 0;
	}
	.orderDatail .nav .navCon{
		padding: 0 40rpx;
	}
	.orderDatail .nav .navCon .on{
		color: #e93323;
	}
	.orderDatail .nav .progress{
		padding: 0 65rpx;
		margin-top: 10rpx;
	}
	.orderDatail .nav .progress .iconfont{
		font-size: 25rpx;
		color: #939390;
		margin-top: -2rpx;
	}
	.orderDatail .nav .progress .line{
		width: 100rpx;
		height: 2rpx;
		background-color: #939390;
	}
	.orderDatail .address{
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}
	.orderDatail .address .name{
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}
	.orderDatail .address .name .phone{
		margin-left: 40rpx;
	}
	.orderDatail .line{
		width: 100%;
		height: 3rpx;
	}
	.orderDatail .line image{
		display: block;
	}
	.orderDatail .orderGoods{
		background-color: #fff;
		margin-top: 12rpx;
	}
	.orderDatail .orderGoods .total{
		width: 100%;
		height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		box-sizing: border-box;
	}
	.orderDatail .orderGoods .goodWrapper .item{
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		height: 180rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .pic{
		width: 130rpx;
		height: 130rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .pic image{
		border-radius: 6rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .text{
		width: 537rpx;
		position: relative;
	}
	.orderDatail .orderGoods .goodWrapper .item .text .name{
		font-size: 28rpx;
		color: #282828;
		width: 453rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .text .num{
		font-size: 26rpx;
		color: #868686;
	}
	.orderDatail .orderGoods .goodWrapper .item .text .attr{
		font-size: 20rpx;
		color: #868686;
		margin-top: 7rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .text .money{
		font-size: 26rpx;
		margin-top: 17rpx;
	}
	.orderDatail .orderGoods .goodWrapper .item .text .evaluate{
		position: absolute;
		width: 114rpx;
		height: 46rpx;
		border: 1rpx solid #bbb;
		border-radius: 4rpx;
		text-align: center;
		line-height: 46rpx;
		right: 0;
		bottom: -5rpx;
	}
	.orderDatail .wrapper{
		background-color: #fff;
		margin-top: 12rpx;
		padding: 30rpx;
	}
	.orderDatail .wrapper .item{
		font-size: 28rpx;
		color: #282828;
	}
	.orderDatail .wrapper .item:nth-child(n+2){
		margin-top: 20rpx;
	}
	.orderDatail .wrapper .item .conter{
		color: #868686;
		width: 460rpx;
		text-align: right;
	}
	.orderDatail .wrapper .item .conter .copy{
		font-size: 20rpx;
		color: #333;
		border-radius: 3rpx;
		border: 1rpx solid #666;
		padding: 3rpx 15rpx;
		margin-left: 24rpx;
	}
	.orderDatail .wrapper .actualPay{
		border-top: 1rpx solid #eee;
		margin-top: 30rpx;
		padding-top: 30rpx;
	}
	.orderDatail .wrapper .actualPay .money{
		font-weight: bold;
		font-size: 30rpx;
	}
	.orderDatail .footer{
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.orderDatail .footer .qs-btn{
		width: auto;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
		padding: 0 3%;
		color: #aaa;
		border: 1px solid #ddd;
		margin-right: 20rpx;
	}
	.orderDatail .footer .bnt{
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 27rpx;
	}
</style>
